<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" type="text/css" href="css/reset.css" />
		 <link rel="stylesheet" type="text/css" href="css/personal.css" />
		 <link rel="stylesheet" type="text/css" href="css/com.css" />
		<script src="js/jquery-1.11.3.js"></script>
		<!--<script src="js/personal.js"></script>-->
		<!--jQuery自动定位当地天气预报代码-->
		<script src="js/jquery.min.js"></script>
        <script src="js/jquery.leoweather.min.js"></script>
		
		 
		<style type="text/css">
		/*安全策略*/
.personal_main_innerR08mi {width:806px; height: 803px;float:left;margin-left: 10px; border: 1px solid #CCCCCC;/*overflow: hidden;*/margin-top:10px;}	
.p08_1mi{margin: 10px 0 0 10px;}
.p08_2mi{margin: 20px 0 10px 10px;}

		
		
			 .p08_3mi{border-top: 1px solid #CCCCCC;} 
			 /*.p08_3mi div{margin-left: 232px; width: 340px; height: 46px; border: 1px solid  #CCCCCC; margin-bottom: 11px;}*/
			 .p08_3mi div span{ display: inline-block; margin: 5px;}
			 .p08_3mi div img{margin-top: 5px;}
			 .p08_3mi div input{height: 30px; border: none; }
			 .p08_31mi{ margin-top: 94px;margin-left: 232px; width: 340px; height: 46px; border: 1px solid  #CCCCCC; margin-bottom: 11px;}
			 .p08_32mi{margin-left: 232px; width: 340px; height: 46px; border: 1px solid  #CCCCCC; margin-bottom: 11px;}
			 .p08_33mi{margin-left: 232px; width: 340px; height: 46px; border: 1px solid  #CCCCCC; margin-bottom: 11px;}
			 .p08_34mi{margin-left: 232px; width: 340px; height: 46px; border: 1px solid  #CCCCCC; margin-bottom: 11px;}
			 /*.p08_35mi{width: 175px;height: 46px;border: 1px solid  #CCCCCC; margin-bottom: 11px;margin-left: 232px;}
			 .p08_35mi input{width: 141px; height: 41px;}*/
			 .p08_36mi{margin-top: 66px;margin-left: 232px; width: 340px; height: 46px; border: 1px solid  #CCCCCC; margin-bottom: 11px;}
			 .p08_3mi p{margin-left: 277px;}
			 
			 .p08_35mi{width: 341px;  height:49px;border: 1px solid #CCCCCC;  margin: 0px  0 61px  232px;}
.p08_35mi div{float: left;}
.p08_35mi input{width: 150px;  height:48px;border: none;}
			 
			 
			 .p08_4_xmi{width: 338px; height: 46px; /*margin-bottom: 20px;*/ background: #b20007; color: #FFFFFF;font-size: 22px; font-weight: bold;}
		
	 /*弹出*/
			.po_phone_num{display: none; margin-left: 228px;color: deeppink;}
			
			.po_email{display: none;margin-left: 228px; color: deeppink;}	
		</style>
		
		
		<!--加载头部模板-->
      	<script>
			$(function() {
				$('#header01').load('personal-header-footer.html #header_wrap');
				$('#footer01').load('personal-header-footer.html  #footer_wrap');
				
			})
		</script>
	</head>

	<body>
	
		<!--加载头部模板-->
		<div id="header01"></div>
		<!--个人中心加天气预报-->
		<div class="personal">
			<div class="personal-inner">
				<div class="user">
					<div style="float: left; width: 97px; height: 97px; border-radius: 50%; background:url(img/userimg.png) no-repeat; background-size: cover; margin-top: 10px;"></div>
					<div style="float: left; margin-top: 6px; margin-left: 15px;">
						<div style="font-size: 21px; color: #FFFFFF; line-height: 65px;">个人中心</div>
						<div style="font-size: 21px; color: #FFFFFF;">18895731936</div>
					</div>
				</div>

				<div class="demo">
			<script>
				$('.demo').leoweather({
					format: '<i class="icon-{图标}"></i><p>{城市}<span>|</span>{天气}<span>|</span>{气温}℃</p>'
				});
			</script>
		</div>

			</div>
		</div>
<div class="inner_personal">
		<div class="aa">
			<div id="leftmenu0"> 
				<li style="margin-top: 15px;"><img src="img/businessman 02.png"/></li>
				<li ><a href="dealNote.html">交易记录</a></li>
				<li  style="border-bottom: 1px solid #CCCCCC;"><a href="noteAdd.html">充值记录</a></li>
				<li style="margin-top: 15px;"><img src="img/businessman 03.png"/></li>
				<li ><a href="personMessage.html">账户信息</a></li>
				<li ><a href="certificationMessage.html">实名认证</a></li>
				
				<li  style="border-bottom: 1px solid #CCCCCC;"><a href="cardManage.html">卡片管理</a></li>
				<li style="margin-top: 15px;"><img src="img/businessman 04.png"/></li>
				<li ><a href="cardApplication.html">卡片申请</a></li>
				<li   style="border-bottom: 1px solid #CCCCCC;"><a>商家入驻申请</a></li>
				
				
				<li style="margin-top: 15px;"><img src="img/businessman 05.png"/></li>
				<li ><a href="safeTactic.html">安全策略</a></li>
				<li  style="border-bottom: 1px solid #CCCCCC;"><a href="serviceReminder.html">提醒服务</a></li>

			</div>
			
			<ul  class="li_02">
		          	    	  	   	   <li>常见问题？</li>
		          	    	  	   	   <li>如何入驻聪付？</li>
		          	    	  	   	   <li>忘记支付密码？</li>
		          	    	  	   	   <li>什么是实名认证？</li>
		          	    	  	   	   <li>收不到邮件激活？</li>
		          	    	  	   	   <li>手机充值未到账？</li>
		          	    	  	   	   <li>如何设置安全问题？</li>
		          	    	  	   </ul>
			
			
		
				
		</div>
		
		<div id="mcont0" class="bb">
			
			
			

		
			
	
			
			
			<!--8888888888888888888888888888888888-->
			
				<div class="personal_main_innerR08mi">
					 <div   class="p08_1mi"><img src="img/p_aq1.png"/></div>
					 <div  class="p08_2mi">邮箱绑定</div>
					 <div class="p08_3mi">
					 	<form>
					 	  <div class="p08_31mi"><span><img src="css/img/login_01.png"> </span><input type="text" placeholder="邮箱账号" class="email"></div>
				<div class="po_email">请输入正确的邮箱号码</div>	 	  
					 	  <div class="p08_32mi"><span><img src="css/img/login_01.png"> </span><input type="text" placeholder="手机号" class="phone_num"></div>
				<div class="po_phone_num">请输入正确的手机号码</div>	 	 	  
					 	  <!--<div class="p08_35mi"><span><img src="css/img/login_03.png"> </span><input type="text" placeholder="验证码"><input type="button" placeholder="验证码"></div>-->
					 	  <div  class="p08_35mi"><div><img src="img/p_gs2.png"/></div>
			    		     <input type="text" id="checkCode" name="checkCode" size="6"   class="yanzheng" placeholder="验证码" style="height: 46px;"/>  
                             <input id="btnSendCode" type="button" value="获取验证码" onclick="sendMessage()"  style="height: 49px;"/>  
			    		 </div>
			    		 
			    		 
					 	  <div class="p08_36mi"><input type="submit" value="完成"  class="p08_4_xmi" style="height: 46px;"/></div>
					 	  <a href="#"><p>请前往邮箱进行验证，一键激活</p></a>
					 	 </form> 
					 </div>
					
				</div>
			
			
			
			
			
			
			
		</div>
</div>

<!--加载尾部的内容-->
		<div id="footer01"></div>
	</body>
 <script>
      //倒计时
 var InterValObj; //timer变量，控制时间  
var count = 60; //间隔函数，1秒执行  
var curCount;//当前剩余秒数  
var code = ""; //验证码  
var codeLength = 6;//验证码长度  
function sendMessage() {  
    curCount = count;  
    var phone=$("#phone").val();//手机号码  
    if(phone != ""){  
        //设置button效果，开始计时  
        $("#btnSendCode").attr("disabled", "true");  
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次  
    //向后台发送处理数据  
        $.ajax({  
            type: "POST", //用POST方式传输  
            dataType: "text", //数据格式:JSON  
            url: 'RegisterMessage.action', //目标地址  
            data: "phone=" + phone + "&code=" + code,  
            error: function (XMLHttpRequest, textStatus, errorThrown) { },  
            success: function (msg){ }  
        });  
    }else{  
        alert("手机号码不能为空！");  
    }  
}  
//timer处理函数  
 function SetRemainTime() {  
    if (curCount == 0) {                  
        window.clearInterval(InterValObj);//停止计时器  
        $("#btnSendCode").removeAttr("disabled");//启用按钮  
        $("#btnSendCode").val("重新发送验证码");  
        code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效      
    }  
    else {  
        curCount--;  
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
    }  
}  


//验证邮箱
 	$(function(){
		var juddge01=juddge02=juddge03=juddge04 =juddge05= false;
		$(".email").blur(function(){
			//alert(1)
			var $email = $(".email").val();
			var reg01 = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;//邮箱号
			
			if(reg01.test($email)){
			
			console.log("邮箱或者手机号正确");
			
			$(".po_email").css("display","none");
			
			juddge01 = true;
		}else{
			
			$(".po_email").css("display","block");
			
			juddge01 = false;
		}
			
		})
	
		//验证手机号码
		$(".phone_num").blur(function(){
			//alert(1)
			var $phone_num = $(".phone_num").val();
			var reg02 = /^1[3|4|5|7|8]\d{9}$/;//手机号
			
			if(reg02.test($phone_num)){
			
			console.log("邮箱或者手机号正确");
			
			$(".po_phone_num").css("display","none");
			
			juddge01 = true;
		}else{
			
			$(".po_phone_num").css("display","block");
			
			juddge01 = false;
		}
			
		})


		
	})
 </script>
</html>